<template>
  <div class='content'>
    <div class="item" v-for="(item,i) in list" :key='i'>
      <div class="icon"><img src="../assets/icon5.png" alt=""></div>
      <div class='_info'>
        <div class="info">
          <span>{{item.name}}</span>
          <span>{{item.date}}</span>
        </div>
        <div class="info right">
          <span>{{item.money}}</span>
          <span>{{item.state}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: [{
          name:'南京地铁',
          money:'3.00',
          state:'交易成功',
          date:'09-27'
        },{
          name:'南京地铁',
          money:'3.00',
          state:'交易成功',
          date:'09-27'
        },{
          name:'南京地铁',
          money:'3.00',
          state:'交易成功',
          date:'09-27'
        },{
          name:'南京地铁',
          money:'3.00',
          state:'交易成功',
          date:'09-27'
        },{
          name:'南京地铁',
          money:'3.00',
          state:'交易成功',
          date:'09-27'
        }]
      }
    },
  }
</script>

<style lang="scss" scoped>
.content{
  height: 100vh;
  font-family: PingFangSC-Medium, PingFang SC;
  background: #F2F2F2;
  .item{
    height:75px;
    background-color: #fff;
    display: flex;
    padding:21px 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #F2F2F2;
    .icon{
      margin-right:20px;
      img{
        width:35px;
      }
    }
    ._info{
      width:calc(100% - 55px);
      display: flex;
      justify-content: space-between;
      .info{
        display: flex;
        flex-flow: column;
        &.right{
          align-items:flex-end;
        }
        span{
          font-size: 16px;
          font-weight: 500;
          color: #333;
          &:last-child{
            margin-top:5px;
            font-size: 14px;
            font-weight: 400;
            color: #999;
          }
        }
      }
    }
  }
}
</style>